<template>
  <el-row>
  <el-button type="primary" @click="add()">添加</el-button>
 </el-row>
 <el-row> 
  <el-table :data="filterTableData" style="width: 100%">
    <el-table-column label="保修编号" prop="wId" />
    <el-table-column label="所属小区" prop="wCallId" />
    <el-table-column label="报修用户编号" prop="wUserId" />
    <el-table-column label="保修设备" prop="wEquipment" />
    <el-table-column label="受理时间" prop="wEndTime" />
    <el-table-column label="保修描述" prop="wText" />
    <el-table-column label="受理状态" prop="wState" />
    <el-table-column label="创建时间" prop="wAssess" />
    <el-table-column label="申请状态" prop="wApplication" />
    <el-table-column label="备注" prop="wRemark" />
    <el-table-column align="right">
      <template #default="scope">
        <el-button type="success" plain @click="editData(scope.row)">更新</el-button>
        <el-button type="danger" plain @click="Delete(scope.row.wId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</el-row>
  <!-- 分页 -->
  <div class="demo-pagination-block">
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper" :total="zhonshul" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
  <!-- 添加模态框 -->
  <el-dialog v-model="dialogFormVisible" title="添加" width="500">
    <el-form :model="form">
      <el-form-item label="保修编号" :label-width="formLabelWidth">
        <el-input v-model="form.wId" autocomplete="off" />
      </el-form-item>
      <el-form-item label="申请状态" :label-width="formLabelWidth">
        <el-input v-model="form.wApplication" autocomplete="off" />
      </el-form-item>
      <el-form-item label="评价等级" :label-width="formLabelWidth">
        <el-input v-model="form.wAssess" autocomplete="off" />
      </el-form-item>
      <el-form-item label="所属小区">
        <el-select v-model="form.wCellId" placeholder="请选择活动区域">
          <el-option v-for="item in dajksdwaj" :key="item.userId" :label="item.userName" :value="item.userName" />
        </el-select>
      </el-form-item>
      <el-form-item label="报修用户编号">
        <el-select v-model="form.wUserId" placeholder="请选择活动区域">
          <el-option v-for="itemt in kdswkd" :key="itemt.cellId" :label="itemt.cellName" :value="itemt.cellName" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" :label-width="formLabelWidth">
        <el-input v-model="form.wCreateTime" autocomplete="off" />
      </el-form-item>
      <el-form-item label="受理时间" :label-width="formLabelWidth">
        <el-input v-model="form.wEndTime" autocomplete="off" />
      </el-form-item>
      <el-form-item label="保修设备" :label-width="formLabelWidth">
        <el-input v-model="form.wEquipment" autocomplete="off" />
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="form.wRemark" autocomplete="off" />
      </el-form-item>
      <el-form-item label="受理状态" :label-width="formLabelWidth">
        <el-input v-model="form.wState" autocomplete="off" />
      </el-form-item>
      <el-form-item label="保修描述" :label-width="formLabelWidth">
        <el-input v-model="form.wText" autocomplete="off" />
      </el-form-item>
     
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addData()"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 编辑弹窗 -->
  <el-dialog v-model="editDialogVisible" title="编辑" width="500" align-center>
    <el-form :model="editForm">
      <el-form-item label="保修编号">
        <el-input v-model="editForm.wId" />
      </el-form-item>
      <el-form-item label="申请状态">
        <el-input v-model="editForm.wApplication" />
      </el-form-item>
      <el-form-item label="评价等级">
        <el-input v-model="editForm.wAssess" />
      </el-form-item>
      <el-form-item label="所属小区">
        <el-select v-model="form.wCellId" placeholder="请选择活动区域">
          <el-option v-for="item in dajksdwaj" :key="item.userId" :label="item.userName" :value="item.userName" />
        </el-select>
      </el-form-item>
      <el-form-item label="报修用户编号">
        <el-select v-model="form.wUserId" placeholder="请选择活动区域">
          <el-option v-for="itemt in kdswkd" :key="itemt.cellId" :label="itemt.cellName" :value="itemt.cellName" />
        </el-select>
      </el-form-item>
      <el-form-item label="申请时间">
        <el-input v-model="editForm.wCreateTime" />
      </el-form-item>
      <el-form-item label="受理时间">
        <el-input v-model="editForm.wEndTime" />
      </el-form-item>
      <el-form-item label="保修设备">
        <el-input v-model="editForm.wEquipment" />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="editForm.wRemark" />
      </el-form-item>
      <el-form-item label="受理状态">
        <el-input v-model="editForm.wState" />
      </el-form-item>
      <el-form-item label="保修描述">
        <el-input v-model="editForm.wText" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeEditDialog">关闭</el-button>
        <el-button type="primary" @click="updateData">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, reactive, onMounted, toRaw } from 'vue'
import { ElMessage } from "element-plus";
import axios from "axios";
onMounted(() => {
  cx()
})
const filterTableData = ref([]);
const zhonshul = ref(0);
// 当前页码
const currentPage = ref(1);
//当前页数量
const pageSize = ref(5);
//查询名称
const search = ref("");
const editDialogVisible = ref(false);//编辑弹窗
const dialogFormVisible = ref(false);
//下拉框
const dajksdwaj = ref([])
const kdswkd = ref([])

const form = ref({
  wId: 0,
  wApplication: 0,
  wAssess: 0,
  wCellId: 1,
  wCreateTime: "",
  wEndTime: "",
  wEquipment: "",
  wRemark: "",
  wState: 0,
  wText: "",
  wUserId: 0
});
const editForm = reactive({
  wId: 0,
  wApplication: 0,
  wAssess: 0,
  wCellId: 1,
  wCreateTime: "",
  wEndTime: "",
  wEquipment: "",
  wRemark: "",
  wState: 0,
  wText: "",
  wUserId: 0
});
onMounted(() => {
  cx()
})
function cx() {

  // 发起 GET 请求
  axios
    .get(
      `/api/api/Warranty?ys=${pageSize.value}&ym=${currentPage.value}&name=${search.value}`
    )
    .then((response) => {
      filterTableData.value = response.data.data;
      console.log(filterTableData.value)
    })
    .catch((error) => {
      console.error(error);
    });
}
function add() {
  form.value.wId = 0
  form.value.wApplication = 0
  form.value.wAssess = 3
  form.value.wCellId = 1
  form.value.wCreateTime = "2024-03-12"
  form.value.wEndTime = "2024-03-12"
  form.value.wEquipment = ""
  form.value.wRemark = ""
  form.value.wState = 1
  form.value.wText = ""
  form.value.wUserId = 1
  dialogFormVisible.value = true;
}
//下拉框绑定
function Uaskd() {
  axios
    .get(`https://localhost:44397/api/Warranty/La`)
    .then((response) => {
      dajksdwaj.value = response.data.map(item =>
      ({
        userId: item.userId,
        userName: item.userName
      })
      )
      console.log(response.data)
    })
    .catch((error) => {

    })
}
//下拉框绑定
function rtudfa() {
  axios
    .get(`https://localhost:44397/api/Warranty/Jur`)
    .then((response) => {
      kdswkd.value = response.data.map(itemt =>
      ({
        tollId: itemt.cellId,
        tollName: itemt.cellName
      })
      )
      console.log(response.data)
    })
    .catch((error) => {

    })
}
//添加功能
const addData = () => {
  //添加信息
  axios
    .post("/api/api/Warranty", toRaw(form.value))
    .then((response) => {
      console.log(response.data);
      if (response.data === 1) {
        ElMessage.success("添加成功");
        dialogFormVisible.value = false; // 关闭对话框
        cx(); // 刷新页面数据
      } else {
        ElMessage.error("添加失败，请重试！");
      }
    })

};
//编辑功能
const updateData = () => {
  axios
    .put(
      `/api/api/Assets/?id=${editForm.caId}`, toRaw(editForm)
    )
    .then(function (response) {
      editForm.wId = 0
      editForm.wApplication = 0
      editForm.wAssess = 3
      editForm.wCellId = 1
      editForm.wCreateTime = "2024-03-12"
      editForm.wEndTime = "2024-03-12"
      editForm.wEquipment = ""
      editForm.wRemark = ""
      editForm.wState = 1
      editForm.wText = ""
      editForm.wUserId = 1
      console.log(response.data);
      if (response.data) {
        ElMessage({
          message: "更新成功",
          type: "success",
        });
        closeEditDialog();
        cx(); // 刷新页面
      } else {
        ElMessage.error("更新失败，请重试！");
      }
    })

};
//编辑显示功能
const editData = (row) => {
  editForm.wId =row.wId
  editForm.wApplication =row.wApplication
  editForm.wAssess =row.wAssess
  editForm.wCellId =row.wCellId
  editForm.wCreateTime =row.wCreateTime
  editForm.wEndTime =row.wEndTime
  editForm.wEquipment =row.wEquipment
  editForm.wRemark =row.wRemark
  editForm.wState =row.wState
  editForm.wText =row.wText
  editForm.wUserId =row.wUserId
  editDialogVisible.value = true;
};
//点击关闭按钮
const closeEditDialog = () => {
  editDialogVisible.value = false;
};
 //删除按钮
 function Delete(caId) {
    console.log(caId)
  axios.delete(`/api/api/Warranty?id=${caId}`)
    .then((response) => {
       if (response.status === 200) {
          ElMessage({
            message: "删除成功",
            type: "success",
          });
          dialogFormVisible.value = false;
        } else {
          ElMessage({
            message: "删除失败",
            type: "waring",
          });
        }
        cx()
    })
    .catch((error) => {
      console.error(error.response.data); // 获取服务器返回的详细错误信息
      console.error(error.response.status); // 获取HTTP状态码
      console.error(error.response.statusText); // 获取HTTP状态码对应的文本描述
    });
  }
</script>

<style></style>